<template>
<fieldset class="one">
<fieldset class="tallfather">
    <div class="d1">
        <TallSon1 @sendtxt="getTxt1"/>
    </div>
    <div>|</div>
    <div class="d2">
        <TallSon2  @sendtxt="getTxt2"/>
    </div>
  </fieldset>
  <aside class="a1">
        <ul>
            <li v-for="item in s1msg" :key="item" class="li1">Tommy:{{item}}</li>
        </ul>
        <ul>
            <li v-for="item in s2msg" :key="item" class="li1">John:{{item}}</li>
        </ul>
    </aside>
</fieldset>
  

</template>

<script setup>
import { reactive, ref } from 'vue';
import TallSon1 from './TallSon1.vue';
import TallSon2 from './TallSon2.vue';

let s1msg = reactive([]);
let s2msg = reactive([]);
let f1txt = ref('');
let f2txt = ref('');
const getTxt1 = (val )=>{
 f1txt.value = val;
 s1msg.push( f1txt.value);
}
const getTxt2 = (val )=>{
 f2txt.value = val;
 s2msg.push( f2txt.value);
}

</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.tallfather{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.d1,.d2{
    width: 48%;
}
.a1{
    width: 96%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

</style>